<template>
  <div class="app-container">
    <div class="messages">
      <div v-if="isShow" class="filter-container">
        <div class="filter-content">
          <div class="searchif">
            <el-row>
              <el-col :span="8">
                <div class="search-item">
                  <label>消息编号：</label>
                  <el-input
                    v-model="query.informationNumber"
                    clearable
                    placeholder="请输入消息编号"
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>消息标题：</label>
                  <el-input
                    v-model="query.informationTitle"
                    clearable
                    placeholder="请输入消息标题"
                  />
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="btngroup">
            <el-button
              class="filter-item redBtn"
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="searchMessage"
            >
              查询
            </el-button>
            <el-button
              class="reset-item"
              icon="el-icon-refresh"
              type="primary"
              size="mini"
              @click="refreshMessage"
            >
              重置
            </el-button>
          </div>
        </div>
      </div>
      <div v-if="isShow" class="input-message">
        <div class="addBox">
          <el-button class="addNews" type="danger" size="mini" @click="addMessage">
            <b>+</b>
            添加消息
          </el-button>
        </div>
        <div class="messageTable">
          <!-- max-height="550" -->
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            highlight-current-row
            header-cell-class-name="table-header-cell"
            header-row-class-name="table-header-row"
          >
            <el-table-column align="center" label="消息编号">
              <template slot-scope="scope">
                {{ scope.row.informationNumber }}
              </template>
            </el-table-column>

            <el-table-column label="通知渠道" align="center">
              <template slot-scope="scope">
                {{ scope.row.informChannel | retype }}
              </template>
            </el-table-column>
            <el-table-column label="发送规则" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sendRule | reRules }}</span>
              </template>
            </el-table-column>
            <el-table-column label="消息标题" align="center">
              <template slot-scope="scope">
                {{ scope.row.informationTitle }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              class-name="status-col"
              width="140"
              label="消息内容"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.informationContent }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="发送时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | getNewTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160px" class="setBtns">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  class="upStr"
                  @click="updateMessage(scope.row.id)"
                >
                  修改
                </el-link>
                <span class="line">|</span>
                <el-link
                  type="danger"
                  :underline="false"
                  class="upStr redBtn"
                  @click="deleteMessage(scope.row.id)"
                >
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          :total="total"
          layout="total, prev, pager, next, jumper"
          :current-page="paging.pageNo"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog title="删除消息" :visible.sync="dialogVisibleDelete" width="30%">
      <span>
        <i class="el-icon-warning" />
        删除后，未发送的消息将不会进行发送
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleDelete = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="delInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMessageList, DeleteOne } from '@/api/message/index'

export default {
  filters: {
    retype(val) {
      if (val === '1') {
        return ''
      }
    },
    reRules(val) {
      if (val === '1') {
        return '立即发送'
      } else {
        return '定时发送'
      }
    },
    getNewTime(value) {
      if (typeof value === 'undefined') {
        return ''
      } else {
        const date = new Date(parseInt(value))
        const y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        let h = date.getHours()
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes()
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds()
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    },
  },

  data() {
    return {
      listLoading: true,
      query: {
        informationNumber: '',
        informationTitle: '',
      },
      paging: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisibleDelete: false,
      currentPage: 2,
      radio: '1',
      isShow: true,
      isShowAdd: false,
      showItem: true, // 是否展开
      list: [],
      DeleteOneId: '',
    }
  },
  computed: {
    word: function () {
      if (this.showItem === false) {
        return '展开'
      } else {
        return '收起'
      }
    },
  },
  mounted() {
    /**
     * 收起搜索
     */
    this.$nextTick(function () {
      this.getList()
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      getMessageList({ informationVo: { ...this.query }, ...this.paging }).then(response => {
        this.list = response.records
        this.paging.pageNo = response.pageNo
        this.paging.pageSize = response.pageSize
        this.total = response.total
        this.listLoading = false
      })
    },
    // 添加消息
    addMessage() {
      this.$router.push({ path: '/maintain/addMessage' })
    },
    // 修改消息
    updateMessage(val) {
      this.$router.push({ path: '/maintain/upMessage', query: { id: val } })
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.paging.pageNo = val
      this.getList()
    },
    // 查询消息
    searchMessage() {
      this.getList()
    },
    // 重置消息
    refreshMessage() {
      this.query = this.$options.data().query
      this.getList()
    },
    // 删除消息
    deleteMessage(id) {
      this.DeleteOneId = id
      this.dialogVisibleDelete = true
    },
    delInfo() {
      this.dialogVisibleDelete = false
      // eslint-disable-next-line no-undef
      DeleteOne({ informationId: `${this.DeleteOneId}` }).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
        })
        this.getList()
        this.DeleteOneId = ''
      })
    },
  },
}
</script>

<style lang="scss" scoped>
 @import '@/child-business/styles/public.scss';
.app-container {
  padding: 20px;
}

.filter-container {
  position: relative;

  .filter-item {
    display: inline-block;
    min-width: 65px;
    padding: 5px 10px;
    margin-bottom: 10px;
    vertical-align: middle;
    border: none;
  }

  .reset-item {
    display: inline-block;
    min-width: 65px;
    padding: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #333;
    vertical-align: middle;
    background: none;
    border: 1px solid #ddd;
  }

  .dropdown-item {
    display: inline-block;
    min-width: 65px;
    margin-bottom: 10px;
    vertical-align: middle;
  }

  &::before {
    position: relative;
    display: block;
    width: 10px;
    height: 42px;
    content: '';
  }

  .filter-content {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    background: #fff;

    &.border-bottom {
      border-bottom: 1px solid #eee;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }

    div {
      flex: 1 1;

      &.searchif {
        position: relative;
        padding-right: 20px;
        overflow: hidden;

        .moreico {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
        }

        &.height {
          height: 46px;
        }

        .search-item {
          display: inline-block;
          display: flex;
          padding-left: 10px;
          font-size: 14px;
          color: #333;
          justify-content: center;

          label {
            display: inline-block;
            margin-bottom: 10px;
            font-weight: normal;
            line-height: 36px;
            text-align: right;
            vertical-align: middle;
          }

          .el-input__inner {
            height: 32px;
            line-height: 32px;
          }

          & > span {
            flex: 1;
          }
        }
      }

      &.btngroup {
        display: flex;
        height: 42px;
        text-align: right;
        flex: 0 0 210px;
        align-content: flex-end;
        justify-content: flex-end;

        .redBtn {
          background: #d12f1f;
        }

        .redBtn:hover {
          background: #e34f2f;
        }
      }
    }
  }
}

.messageTable {
  position: relative;
  height: 100%;
  padding-top: 15px;
  padding-left: 10px;

  /* border: 1px solid #EBEEF5; */
  background: #fff;
}

/* .table-message{
  padding-top: 20px;
} */
.addBox {
  width: 100%;
  margin: 10px 0;
}

.addNews {
  min-width: 92px;
  font-size: 14px;
  color: #d23f1f;
  text-align: center;
  background: none;
  border: 1px solid #d12f1f;
}

.addNews:hover {
  min-width: 92px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background: none;
  background: #d23f1f;
}

b {
  margin-right: 8px;
  font-size: 16px;
  font-weight: 800;
}

.notice {
  padding: 5px 25px 15px;
  margin: 0 0 25px 0;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.notice h4 {
  font-weight: 700;
  color: #666;
}

.notice span {
  font-size: 14px;
  color: #666;
}

.el-input {
  position: relative;
  display: inline-block;
  width: 300px;
}

.el-textarea {
  position: relative;
  display: inline-block;
  width: 300px;
  vertical-align: bottom;
}

.el-dropdown-link {
  color: #f56c6c;
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.btngroup {
  align-content: flex-end;
  display: flex;
  margin: 0 4px;
  text-align: center;
}

label {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: normal;
  line-height: 32px;
  text-align: right;
}

.search-item {
  display: inline-flex;
}

.subSuc {
  text-align: center;
}

/* 设置xx条/页的框的颜色 */
.el-select .el-input.is-focus .el-input__inner,
.el-pagination__sizes .el-input .el-input__inner:hover,
.el-select .el-input__inner:focus {
  border-color: #f56c6c;
}

/* 设置当前页码的样式，及鼠标移上其他页码时的样式,以及左右箭头鼠标移上的样式 */
.el-pager li.active,
.el-pager li:hover,
.el-pagination button:hover {
  color: #f56c6c;
}

/* 设置当前选中的“xx条/页”的样式，是点击以后弹出来的框里的 */
li.el-select-dropdown__item.selected {
  color: #f56c6c;
}

.el-pagination {
  margin-right: 20px;
  font-weight: 700;
  color: #303133;
  white-space: unset;
}
</style>
